<template>
  <div>
    <!-- 灰色的蒙层 -->
    <transition name="myfade1">
      <div class="huise" v-show="$route.path == '/home/popup'"></div>
    </transition>
    <!-- 首页全部内容 -->
    <transition name="myfade">
      <div v-if="$route.path == '/home'" class="homecontent">
        <van-search v-model="searchval" disabled  shape="round" background="#fff" placeholder="输入搜索关键词" @click="goToPopup"/>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkred">
          <van-swipe-item v-for="item in banner" :key="item.id">
            <img :src="item.image_url" alt="" width="100%" style="display: block;">
          </van-swipe-item>
        </van-swipe>
        <!-- 宫格 -->
        <MyGrid :channel="channel" />
        <!-- 品牌制造商直供 -->
        <BrandList :brandList="brandList" />
        <!-- 新品首发 -->
        <ProductHome :goodsList="newGoodsList" mytitle="周一周四·新品首发"/>
        <!-- 人气推荐 -->
        <PersonRecomed :hotGoodsList="hotGoodsList"/>
        <!-- 专题精选 -->
        <SpecialTopic :topicList="topicList" />
        <!-- 分类 -->
        <div v-for="item in categoryList" :key="item.id" class="homecategory">
          <ProductHome :goodsList="item.goodsList" :mytitle="item.name"/>
        </div>
        <div class="last"></div>

      </div>
    </transition>
    
    <!-- popup搜索内容 -->
    <transition name="slide">
      <router-view v-if="$route.path == '/home/popup'" />
    </transition>
    <BackTop/>
  </div>
</template>

<script>
import MyGrid from '../components/home/MyGrid.vue'
import BrandList from '../components/home/BrandList.vue'
import ProductHome from '../components/home/ProductHome.vue'
import PersonRecomed from '../components/home/PersonRecomed.vue'
import SpecialTopic from '../components/home/SpecialTopic.vue'
import BackTop from '../components/BackTop.vue'
import { GetHomeData } from '../request/api'
export default {
  name: 'Home',
  data() {
    return {
      searchval: '',
      // 轮播图数组
      banner: [],
      // 宫格
      channel: [],
      // 品牌制造商
      brandList: [],
      // 新品首发
      newGoodsList: [],
      // 人气推荐
      hotGoodsList: [],
      // 专题精选
      topicList: [],
      // 分类数组
      categoryList: []
    }
  },
  components: {
    MyGrid,
    BrandList,
    ProductHome,
    PersonRecomed,
    SpecialTopic,
    BackTop
  },
  methods: {
    goToPopup() {
      this.$router.push('/home/popup')
    }
  },
  created() {
    GetHomeData().then(res => {
      if (res.errno == 0) {
        let { banner, channel, brandList, newGoodsList, hotGoodsList, topicList, categoryList } = res.data
        this.banner = banner
        this.channel = channel
        this.brandList = brandList
        this.newGoodsList = newGoodsList
        this.hotGoodsList = hotGoodsList
        this.topicList = topicList
        this.categoryList = categoryList
      }
    }).catch(err => {
      console.log(err);
    })
  }
}
</script>

<style scoped>
.slide-enter, .slide-leave-to {
  right: -100%;
}
.slide-enter-active, .slide-leave-active {
  transition: right .4s linear;
}
.slide-enter-to, .slide-leave {
  right: 0;
}

.huise {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: #000;
  z-index: 99;
}

/* 首页内容的淡出 */
.myfade-leave {
  opacity: 1;
}
.myfade-leave-active {
  transition: opacity 0.5s linear;
}
.myfade-leave-to {
  opacity: 0;
}


/* 只要淡入 */
.myfade1-enter,
.myfade1-leave-to {
  opacity: 0;
}
.myfade1-enter-active,
.myfade1-leave-active {
  transition: opacity 0.5s linear;
}
.myfade1-enter-to,
.myfade1-leave {
  opacity: 1;
}

.last {
  width: 100%;
  background: #fff;
  height: 50px;
}
</style>